layui.use(['element','form','table'],function(){
    var table = layui.table;

    var form = layui.form;
    form.on('select(departmentParent)', function(data){
        vm.departmentParent = data.value;
    });
    setTimeout(function (){
        form.render('select');
    }, 500);

    table.render({
        elem: '#demo'
        ,toolbar: '#toolbarDemo'
        ,url: '/copDepartment/list' //数据接口
        ,page: true //开启分页
        ,cols: [[ //表头
            {field: 'departmentId',title: '部门编号', sort: true, width:120}
            ,{field: 'departmentName',edit: 'text', title: '部门名', }
            ,{field: 'departmentParent',edit: 'text', title: '隶属部门编号', sort: true}
            ,{field: 'departmentParentName', title: '隶属部门'},
            {fixed: 'right',align:'center', toolbar: '#barDemo',title: '操作',}
        ]]
    });

    //头部工具栏监听事件--增加
    table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
            case 'add':
                layer.open({
                    type:1,
                    area:['500px','500px'],
                    title: '' +
                        '<li id="icon" class="layui-icon layui-icon-release layui-anim layui-anim-scaleSpring" ' +
                        'style="font-size: 30px; color: #009688;" data-anim="layui-anim-scaleSpring"></li> 添加 ',
                    content: $("#formAdd"),
                    shade: 0,
                    btn: ['提交']
                    ,btn1: function(index, layero){
                        $.ajax({
                            type:"post",
                            url: "/copDepartment",
                            contentType:'application/x-www-form-urlencoded',
                            dataType:"json",
                            async:true,
                            data:{
                                departmentName : vm.departmentName,
                                departmentParent :vm.departmentParent
                            },
                            success:function(result){
                                layer.msg(result.msg, {
                                    icon: 1
                                })
                            },
                            error: function (xhr, ajaxOptions, thrownError) {
                                if(xhr.status==403) {
                                    alert("无权限")
                                    location.reload([true])
                                }
                            }
                        });
                        layer.close(index)
                        location.reload([true])
                    },
                    cancel: function(layero,index){
                        layer.closeAll();
                    }

                });
                break;
        };
    });

    //工具栏监听事件--删除
    table.on('tool(test)', function(obj){
        var data = obj.data;
        var layEvent = obj.event;
        var id = obj.data.departmentId;
        if(layEvent === 'del'){
            layer.confirm('真的删除行么', function(index){
                obj.del();
                layer.close(index);
                console.log(data)
                //向服务端发送删除指令
                $.ajax({
                    url: '/copDepartment/'+id,
                    type: 'DELETE',
                    dataType: 'json',
                    error: function (xhr, ajaxOptions, thrownError) {
                        if(xhr.status==403) {
                            alert("无权限")
                            location.reload([true])
                        }
                    }
                })
                    .done(function (result) {
                        if (result.code == 500) {
                            layer.msg('删除失败', {
                                icon: 1
                            })
                            location.reload([true])
                        }else{
                            layer.msg('删除成功', {
                                icon: 1
                            })
                        }
                    });
            });
        }
    });

    //监听单元格编辑--编辑
    table.on('edit(test)', function (obj) {
        var value = obj.value //得到修改后的值
            , data = obj.data //得到所在行所有键值
            , field = obj.field; //得到字段
        var a = {
            'departmentId': data.departmentId,
            'departmentName': data.departmentName,
            'departmentParent': data.departmentParent,
        };
        var data = JSON.stringify(a)
        $.ajax({
            url: '/copDepartment',
            type: 'PUT',
            headers: { 'Content-Type': 'application/json;charset=utf-8' },
            dataType: 'json',
            data: data,
            error: function (xhr, ajaxOptions, thrownError) {
                if(xhr.status==403) {
                    alert("无权限")
                    location.reload([true])
                }
            }
        })
            .done(function (result) {
                if (result.code == 500) {
                    layer.msg('修改失败', {
                        icon: 1
                    })
                    location.reload([true])
                }else{
                    layer.msg('修改成功', {
                        icon: 1
                    })
                    location.reload([true])
                }
            });
    });
});

var vm = new Vue({
    el: '#app',
    data: {
        departmentName : "",
        departmentParent :"",
        list: []
    },
    created() {
        this.getAllList()
    },
    methods: {
        getAllList() {
            $.ajax({
                type: "get",
                url: "/copDepartment/list",
                contentType: 'application/x-www-form-urlencoded',
                dataType: "json",
                async: true,
                data: {},
                success: function (result) {
                    if (result.code == 500) {
                        layer.msg(result.msg, {
                            icon: 1
                        })
                    } else {
                        vm.$data.list = result.data
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    if(xhr.status==403) {
                        alert("无权限")
                        location.reload([true])
                    }
                }
            });
        }
    }
})